import React from 'react'
import { AjaxSelector } from '../components/common/ajaxSelector'
import { Input } from '../components/common/Input'
import basicStyle from '../components/common/basic.scss'
import { CostTime } from '../components/common/costTime'
import { ScreenShotViewer } from '../components/common/screenShotViewer'
import { AssertImageEqualViewer } from './assertImageEqualViewer'
import { renderEditorOfElementWithExtSelector, renderLogOfElementWithExtSelector } from '../components/common/elementWithExtSelector'

const basicValidFields = ['assertTypeCode', 'code', 'page', 'equalCompareType']

const ImageCompareLogEntry = ({ data, elapse, screenshotId, planId, stepId }) => {
    return <div className={basicStyle.log_entry}>
        断言{renderLogOfElementWithExtSelector({ data })}
        截图在基准环境相同
        <CostTime elapse={elapse} />
        <ScreenShotViewer planId={planId} stepId={stepId} screenshotId={screenshotId} />
        <AssertImageEqualViewer planId={planId} stepId={stepId} />
    </div>
}

export const EqualToBaseEnvCompareType = {
    text: {
        title: '文本',
        validDataFields: [...basicValidFields, 'elementSelectorId'], // 保留的有效data字段名
        renderEditor: (params) => {
            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                </React.Fragment>
            )
        },
        renderLog: ({ data, result }) => {
            const { expected, actual } = result

            return <div className={basicStyle.log_entry}>
                断言{renderLogOfElementWithExtSelector({ data })}
                基准环境文本"{expected}"，实际"{actual}"
            </div>
        },
        getRefIdMap: (data) => {
            const { elementSelectorId } = data
            return { ajax: 0, mock: 0, element: elementSelectorId }
        },
    },
    image: {
        title: '截图',
        validDataFields: [...basicValidFields, 'elementSelectorId'],
        renderEditor: (params) => {
            return (
                <React.Fragment>
                    元素：{renderEditorOfElementWithExtSelector(params)}
                </React.Fragment>
            )
        },
        renderLog: (params) => {
            return <ImageCompareLogEntry {...params} />
        },
        renderWholeLog: true,
        getRefIdMap: (data) => {
            const { elementSelectorId } = data
            return { ajax: 0, mock: 0, element: elementSelectorId }
        },
    },
    network: {
        title: '网络请求参数',
        validDataFields: [...basicValidFields, 'ajaxId', 'filterParamNames', 'compareParamNames'],
        renderEditor: ({ index, data, readOnly, onChangeField }) => {
            const { page, ajaxId = '', filterParamNames = '', compareParamNames = '' } = data
            const filterParamsTip = '筛选参数，a=1&b=2，可为空'
            const compareParamsTip = '待比对参数，c&d，不为空'

            return (
                <React.Fragment>
                    Network：<AjaxSelector placeholder='网络请求' ajaxId={ajaxId} onSelectItem={ajax => onChangeField(index, 'ajaxId', ajax.id)} page={page} readOnly={readOnly} /><br />
                    Filter Param：<Input value={filterParamNames} type='text' readOnly={readOnly} placeholder={filterParamsTip} title={filterParamsTip} onChange={value => onChangeField(index, 'filterParamNames', value)} />
                    Compare Param：<Input value={compareParamNames} type='text' readOnly={readOnly} placeholder={compareParamsTip} title={compareParamsTip} onChange={value => onChangeField(index, 'compareParamNames', value)} />
                </React.Fragment>
            )
        },
        renderLog: ({ data, result }) => {
            const { expected, actual } = result
            const { ajax, filterParamNames = '', compareParamNames = '' } = data
            const { url, remark } = ajax

            return <div className={basicStyle.log_entry}>
                断言<span className={basicStyle.abbr} title={url}>{remark}filterParamNames:{filterParamNames}，compareParamNames:{compareParamNames}</span>
                基准环境请求参数值"{JSON.stringify(expected)}"，实际"{JSON.stringify(actual)}"
            </div>
        },
        getRefIdMap: (data) => {
            const { ajaxId } = data
            return { ajax: ajaxId, mock: 0, element: 0 }
        },
    },
}